%cursor-pointer {
    cursor:pointer;
}
%cursor-default {
    cursor: default;
}
%cursor-not-allowed {
    cursor: not-allowed;
}

a {
    font-weight: $bold-font-weight;
    text-decoration: none;
    @include link-normal {
        color: $main-color-1;
    }
    @include link-emphasize {
        text-decoration: underline;
        color: $main-color-1;
    }
    @include transition(all .8s ease 0s);
}

.round-button {
    font-weight: $bold-font-weight;
    line-height: 1;
    @include flexbox;
    @include justify-content(center);
    @include align-items(center);
    box-sizing: border-box;
    width: $base-font-size * 2;
    height: $base-font-size * 2;
    text-decoration: none;
    border-radius: 50%;
    @extend %cursor-pointer;
    @include link-colors(
        $text-color-3, $main-color-3,
        $text-color-1, $main-color-1
    );
    @include link-normal {
        text-decoration: none;
    }
    @include link-emphasize {
        text-decoration: none;
    }
    @include transition(all .8s ease 0s);
    svg {
        width: $base-font-size;
        height: $base-font-size;
    }
    &.inactive {
        @extend %cursor-not-allowed;
        @include link-colors(
            rgba($text-color-3, .5), $main-color-3,
            rgba($text-color-3, .5), $main-color-3
        );
    }
}

.round-rect-button {
    font-weight: $bold-font-weight;
    line-height: 1;
    display: block;
    box-sizing: border-box;
    padding: $base-font-size * .4 $base-font-size * .6;
    text-decoration: none;
    border-radius: $base-font-size * 2;
    @extend %cursor-pointer;
    @include link-colors(
        $text-color-3, $main-color-3,
        $text-color-1, $main-color-1
    );
    @include link-normal {
        text-decoration: none;
    }
    @include link-emphasize {
        text-decoration: none;
    }
    @include transition(all .8s ease 0s);
    svg {
        width: $base-font-size;
        height: $base-font-size;
    }
}
